<template>
  <div class="c-admin-header-bot">
    <template v-for="menu in activeMenus">
      <c-admin-header-tag
        :key="menu.route"
        :active="activeMenu === menu.route"
        :lock="menu.lock"
        @click="toRoute(menu.route, { from: $route.name })"
        @close="closeTag(menu.route)"
      >
        {{ multLang(menu.langkey) }}
      </c-admin-header-tag>
    </template>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import { toRoute, closeTag } from '@/util/router'
import CAdminHeaderTag from './Tag.vue'
export default {
  name: 'CAdminHeaderBot',
  components: { CAdminHeaderTag },
  props: {},
  data() {
    return {}
  },
  computed: {
    ...mapState({
      activeMenu: state => state.menu.activeMenu,
      activeMenus: state => state.menu.activeMenus
    })
  },
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    ...mapActions({
      delActiveMenu: 'menu/delActiveMenu',
      setActiveMenu: 'menu/setActiveMenu'
    }),
    toRoute,
    closeTag
  }
}
</script>
<style lang="scss">
@include admin {
  .c-admin-header {
    &-bot {
      box-sizing: border-box;
      width: 100%;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #edeff3;
      padding: 0 18px;
      font-size: 0;
      overflow: auto;
      .el-tag {
        cursor: pointer;
        margin-right: 10px;
      }
    }
  }
}
</style>
